<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		canvas{
			border: 1px solid #333;
		}
	</style>
</head>
<body>
	<canvas width="600" height="400" id="canvas"></canvas>
	<script type="text/javascript">
		//相当于拿到一张纸
		var canvas=document.getElementById("canvas");
		//获取画笔
		var ctx=canvas.getContext("2d");
		
		//定义大圆半径
		var R=150

		//移动坐标系
		ctx.translate(300,200)

		//绘制大圆
		function bigCircle(){
			ctx.beginPath()
			ctx.lineWidth=5
			ctx.arc(0,0,R,Math.PI*2,false)
			ctx.stroke()

		}


		//绘制分针辐射线
		function minuteLine(){
			ctx.beginPath()
			ctx.lineWidth=2;

			for(var i=0;i<60;i++){
				ctx.save()
				ctx.rotate(i*6*Math.PI/180)
				ctx.moveTo(0,0)
				ctx.lineTo(0,-R)
				ctx.stroke()
				ctx.restore()
			}


			//绘制圆覆盖分针刻度线
			ctx.beginPath()
			ctx.arc(0,0,R-7.5,0,Math.PI*2,false)
			ctx.fillStyle="white";
			ctx.fill()

		}
	


	function hourLine(){
			//竖直向上画一条线
			for(var i=0;i<12;i++){
				ctx.save()
				ctx.rotate(i*30*Math.PI/180)
				ctx.beginPath()
				ctx.lineWidth=5;
				ctx.moveTo(0,0)
				ctx.lineTo(0,-R)
				ctx.stroke()
				ctx.restore()
			}

			//白色圆覆盖时针的辐射线
			ctx.beginPath()
			ctx.arc(0,0,R-15,0,Math.PI*2,false)
			ctx.fillStyle="white";
			ctx.fill()
			
		}
	

	/****绘制数字****/

		//III
		
		//绘制数字
		function mark(){
			var r=R-30;
			for(var i=0;i<12;i++){
				var angle=i*30;		//0*30 1*30 2*30 3*30
				var x=r*Math.cos(angle*Math.PI/180);
				var y=r*Math.sin(angle*Math.PI/180);

				var arr=["III","IV","V","VI","VII","VIII","IX","X","XI","XII","I","II"]

				ctx.fillStyle="black";
				ctx.textAlign="center";
				ctx.textBaseline="middle";
				ctx.font="20px Arial"
				ctx.fillText(arr[i],x,y)
			}
			
		}
		

		//绘制logo
		function logo(){
			ctx.beginPath()
			ctx.font="18px Arial"
			ctx.fillText("Daniel Weilington",0,-R/2+20)
		}
		
		

		//绘制中心圆点
		function dot(){
			ctx.beginPath()
			ctx.fillStyle="red";
			ctx.arc(0,0,5,0,Math.PI*2,false);
			ctx.fill()
		}


		function staticClock(){
			bigCircle()
			minuteLine()
			hourLine()
			mark()		//绘制数字
			logo()
			dot()
		}

		staticClock()

		

		//绘制秒针
		function handleSecond(second){
			ctx.save()
			ctx.rotate(second*6*Math.PI/180)
				ctx.beginPath()
				ctx.moveTo(0,30)
				ctx.lineTo(0,-R+20)
				ctx.strokeStyle="blue";
				ctx.stroke()
			ctx.restore()
		}

		//绘制分针
		function handleMinute(minute){
			ctx.save()
			ctx.rotate(minute*6*Math.PI/180)
				ctx.beginPath()
				ctx.moveTo(0,20)
				ctx.lineTo(0,-R+35)
				ctx.lineWidth=3;
				ctx.strokeStyle="black";
				ctx.stroke()

			ctx.restore()
		}

		//绘制时针
		function handleHour(hour,minute){
			ctx.save()
			var angleMinute=0.5*minute*Math.PI/180
			ctx.rotate(hour*30*Math.PI/180+angleMinute)
				ctx.beginPath()
				ctx.moveTo(0,15)
				ctx.lineTo(0,-R+55)
				ctx.lineWidth=5;
				ctx.strokeStyle="black"
				ctx.stroke()

			ctx.restore()
		}


		var second=new Date().getSeconds()
		var minute=new Date().getMinutes()
		var hour = new Date().getHours()

		handleSecond(second)
		handleMinute(minute)
		handleHour(hour,minute)


		setInterval(()=>{
			//清除以前的痕迹
			ctx.clearRect(-R-10,-R-10,2*R+20,2*R+20)

			//绘制静态的表盘
			staticClock()

				//获取当前的秒
			var second=new Date().getSeconds()
			var minute=new Date().getMinutes()
			var hour = new Date().getHours()
			//绘制秒针
			handleSecond(second)
			//绘制分针
			handleMinute(minute)
			//绘制时针
			handleHour(hour,minute)
			dot()
		},1000)

		dot()

	</script>
</body>
</html>
